<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../JS基础/utils.js"></script>
    <style>
        .container {
            display: flex;
        }
    </style>
</head>

<body>
    <button id="create">生成球</button>
    <div class="container"></div>

    <script>

        let container = document.getElementsByClassName('container')[0];

        let create = document.getElementById('create');
        class Ball {
            constructor(bgColor, r, num, color) {
                this.bgColor = bgColor;
                this.r = r;
                this.num = num;
                this.color = color;
                this.node = null;
                this.show();
            }
            show() {
                this.node = document.createElement('div');
                this.node.style.cssText = `
                    width: ${2 * this.r}px;
                    height: ${2 * this.r}px;
                    background-color: ${this.bgColor};
                    border-radius: 50%;
                    text-align: center;
                    color: ${this.color};
                    line-height: ${2 * this.r}px;
                    font-size:40px;
                `
                this.node.innerText = this.num;
                container.appendChild(this.node)

            }
        }



        create.onclick = function () {
            container.innerHTML = '';
            let s = new Set();
            while (s.size < 6) {
                s.add(createRandom(1, 33));
            }
            let arr = [...s];
            arr.sort((a, b) => a - b);
            arr.forEach((item) => {
                //bgColor, r, num, color
                new Ball('pink', 60, item, '#fff')
            })

            new Ball('skyblue', 60, createRandom(1, 16), '#fff')
        }



    </script>



</body>

</html>